<style scoped>
.changePass-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80vh;
  background-size: cover;
}

.changePass-box {
  width: 500px;
  height: 350px;
  padding: 20px;
  /*border: 1px solid #ccc;*/
  border-radius: 20px;
  /*background-color: rgba(223,212,213,0.2);*/
  background-size: cover;
}

h2 {
  text-align: center;
  margin-bottom: 20px;
}
</style>


<template>
  <div class="changePass-container">
    <div class="changePass-box">
      <h2>修改密码</h2>
  <el-form style="margin-top: 50px" :rules="rules" :model="user" ref="registerRef">
    <el-form-item label-width="128" label="您的密码：" prop="password">
      <el-input style="width: 300px" v-model="user.password" type="password" show-password/>
    </el-form-item>
    <el-form-item label-width="128" label="确认密码：" prop="twoPass">
      <el-input style="width: 300px" v-model="user.twoPass" type="password" show-password/>
    </el-form-item>
    <el-button type="primary" style="margin-left: 180px" @click="changePassword">确认修改</el-button>
    <el-button type="success" style="margin-left: 10px" @click="router.push('/user/detail')">返回</el-button>
  </el-form>
    </div>
  </div>
</template>

<script setup>

import {changePass} from "../../apis/UserApi.js";
import {elPrompt} from "../../utils/elPrompt.ts";
import {ref} from "vue";
import router from "../../router/router.js";


const user = ref({
  password:'',
  twoPass:'',
})

const rules=ref({
  password:[{ validator:checkPassword,trigger: 'blur'}],
  twoPass:[{ validator:checkPassTwo,trigger: 'blur'}],
  // email:[{ validator:checkEmail,trigger: 'blur'}],
})



function checkPassword(rule,value,callback){
  const regular = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d!@#$%^&*]{6,}$/;
  if (value === ''){
    callback(new Error('请输入密码！'))
  }else if(!regular.test(value)){
    callback(new Error('至少6个字符 包含至少一个大写字母、一个小写字母和一个数字 可以包含特殊字符（例如：!@#$%^&*）'))
  }else{
    callback()
  }
}


function checkPassTwo(rule,value,callback){
  if (user.value.password !== value ){
    callback(new Error('两次密码不相同！'))
  }else{
    callback()
  }
}
function changePassword(){
  changePass(user.value.password,(result)=>{
    if (result.status === 200){
      elPrompt("更改成功","success")
      router.push('/user/detail')
    }else {
      elPrompt(result.message,"error")
    }

  })
}
</script>
